【精选】全局安装yarn，并配置基本vue开发环境

2023-10-23 10:34| 来源: 网络整理| 查看: 265

网址集合：

下载node安装yarn建议安装git安装vuecli 在全局安装yarn之前，首先要安装node，打开官网下载node。可以先查看本地已经全局安装过的包，yarn global list或者是npm list -g --depth 0 全局安装yarnnpm install -g yarn 全局安装vue cliyarn global add @vue/cli 安装好之后通过yarn global dir查看yarn的安装路径，并定位到bin目录（只有全局安装包之后这个目录才会生成），这个路径即是yarn全局安装的包路径，将其加入到环境变量中脚手架工具添加了vue add命令，在实际使用的时候，容易出错，所以在包中安装环境的时候，还是建议使用npm或yarn

补充说明：对于内网的朋友们，可以对npm和yarn设置代理，我这边是光设置yarn的代理是不行的，也不知道原因，如果有大神知道的话，还望解答：

# npm设置代理 npm config set proxy="" npm confit set https-proxy="" # npm删除代理 npm config delete proxy npm config delete https-proxy # yarn设置代理 yarn config set proxy yarn config set https-proxy # yarn删除代理 yarn config delete proxy yarn config delete https-proxy # npm设置阿里源 npm config set registry https://registry.npm.taobao.org/ npm config set registry https://registry.npmjs.org/ # yarn设置阿里源 yarn config set registry https://registry.npm.taobao.org/ yarn config set registry https://registry.npmjs.org/

使用：通过yrm来管理yarn的源地址切换

npm install -g yrm --registry=https://registry.npm.taobao.org yrm ls yrm use taobao yrm test taobao # 测试源的访问速度 npm config get registry # 查看npm当前镜像源 yarn config get registry # 查看yarn当前镜像源

之后使用vue create来创建新项目，就不容易报错了

注意事项： vue add虽然容易出错，但是因为会自动针对安装的包，如vue-router创建一些文件夹，如果需要使用，注意使用git，确保发生问题后能够回退到无错的版本

npm i 插件，会把插件安装到node_modules目录中，不会修改package.json,npm i 插件 --save (-S) ，项目发布上线之后还会依赖用到的插件，没有这些插件，项目不能运行，会更改package.json 写入dependencies(运行依赖)节点npm i 插件 --save-dev(-D) ，安装到开发依赖中，项目上线之后不会用到的插件，更改package.json 写入devDependencies(开发依赖)节点

如果要使用scss，需要安装sass-loader和node-sass，因为webpack无法解析sass文件，需要先sass-loader将.scss转化为css文件，然而，webpack也无法解析css文件，需要用css-loader来解析css，最后使用style-loader将css文件进行压缩分解。 npm在安装的时候，不加版本号会默认安装最新版但是官方库会删除部分版本，导致安装404错误 node-sass: https://github.com/sass/node-sass/tags sass-loader: https://github.com/webpack-contrib/sass-loader/tags 尝试过，使用的办法是

npm uninstall sass-loader node-sass //卸载 npm install [email protected] [email protected] --save-dev //安装对应的版本

在安装之前，先git下，保存package.json状态，见vue-cli说明中

我们推荐在运行 vue add 之前将项目的最新状态提交，因为该命令可能调用插件的文件生成器并很有可能更改你现有的文件。

指定vue的preset 需要安装的插件 vue-router实现路由分发 vuex实现页面之间数据状态的同步 vue add router 在安装的时候，选择history模式即可，之后使用yarn serve页面中出现切换栏，表示安装成功。即可使用git commit -m ""提交git 之后执行vue add vuex 安装vuex 调试工具中出现vuex说明安装成功 vue add bootstrap-vue 该方式是通过vue-cli来安装在 https://bootstrap-vue.org/docs 搜索vue add可以搜到 https://bootstrap-vue.org/ 安装其它插件： npm i axios vue-lazyload element-ui vue-cookie --save-dev 安装好后如果执行yarn serve报错，则执行yarn安装依赖，之后再执行yarn serve就不报错了最后安装好sass等插件，启动无报错后，可以git了

参考文章： https://blog.csdn.net/qq_38505969/article/details/109788391 https://blog.csdn.net/yexudengzhidao/article/details/87689960

【本文地址】

公司简介

联系我们